<template>
  <el-dialog :title="form.tuitionId ? '编辑' : '新增'" v-model="visible" :close-on-click-modal="false" draggable>
    <el-form ref="dataFormRef" :model="form" :rules="dataRules" formDialogRef label-width="90px" v-loading="loading">
      <el-row :gutter="24">
        <el-col :span="12" class="mb20">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名" />
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="form.phone" placeholder="请输入手机号" maxlength="11" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="班级名称" prop="className">
            <el-input v-model="form.className" placeholder="请输入班级名称" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="操作类型" prop="operationType">
            <el-select v-model="form.operationType" placeholder="请选择操作类型">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in operation_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="缴费类型" prop="tuitionType">
            <el-select v-model="form.tuitionType" placeholder="请选择缴费类型">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in tuition_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="交易时间" prop="transactionDate">
            <el-date-picker type="date" placeholder="请选择交易时间" v-model="form.transactionDate"
              :value-format="dateStr"></el-date-picker>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="支付方式" prop="paymentMethod">
            <el-select v-model="form.paymentMethod" placeholder="请选择支付方式">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in payment_method"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20">
          <el-form-item label="交易金额" prop="amount">
            <el-input v-model="form.amount" placeholder="请输入交易金额" />
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="是否欠款" prop="hasArrears">
            <el-select v-model="form.hasArrears" placeholder="请选择是否欠款" @change="selectArrears(form.hasArrears)">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in yes_no_type"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" class="mb20">
          <el-form-item label="是否有协议" prop="hasAgreement">
            <el-select v-model="form.hasAgreement" placeholder="请选择">
              <el-option :value="item.value" :label="item.label" v-for="(item, index) in hasAgreementArr"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="12" class="mb20" v-if="form.hasArrears == '1'">
          <el-form-item label="欠款金额" prop="arrearsAmount">
            <el-input v-model="form.arrearsAmount" placeholder="请输入欠款金额" />
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20" v-if="form.hasArrears == '1'">
          <el-form-item label="学费申请书" prop="applicationImages">
            <upload-file v-model="form.applicationImages"></upload-file>
          </el-form-item>
        </el-col>

        <el-col :span="24" class="mb20">
          <el-form-item label="个人信息备注" prop="remark">
            <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark">
            </el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" class="mb20">
          <el-form-item label="费用备注" prop="remark1">
            <el-input type="textarea" :rows="2" placeholder="请输入备注" v-model="form.remark1">
            </el-input>
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" @click="onSubmit" :disabled="loading">确 认</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts" name="TuitionDialog">
import { useDict } from '/@/hooks/dict';
import { useMessage } from "/@/hooks/message";
import { getObj, addObj, putObj, validateExist } from '/@/api/admin/tuition'
import { rule } from '/@/utils/validate';
const emit = defineEmits(['refresh']);

// 定义变量内容
const dataFormRef = ref();
const visible = ref(false)
const loading = ref(false)
const isCopystatus = ref(false)
// 定义字典
const { operation_type, yes_no_type, payment_method, tuition_type } = useDict('operation_type', 'yes_no_type', 'payment_method', 'tuition_type')

// 提交表单数据
const form = reactive({
  tuitionId: '',
  name: '',
  phone: '',
  operationType: '',
  transactionDate: '',
  paymentMethod: '',
  amount: '',
  hasArrears: '',
  arrearsAmount: '',
  applicationImages: '',
  remark: '',
  className: '',
  tuitionType: '',
  remark1: ''
});
const hasAgreementArr = [
  {
    value: '1',
    label: '是'
  },
  {
    value: '0',
    label: '否'
  }
]

// 定义校验规则
const dataRules = ref({
  name: [{ required: true, message: '姓名不能为空', trigger: 'blur' }],
  phone: [{ required: true, message: '手机号不能为空', trigger: 'blur' }, { validator: rule.mobilePhone, trigger: 'blur' }],
  operationType: [{ required: true, message: '操作类型不能为空', trigger: 'blur' }],
  transactionDate: [{ required: true, message: '交易时间不能为空', trigger: 'blur' }],
  paymentMethod: [{ required: true, message: '支付方式不能为空', trigger: 'blur' }],
  amount: [{ required: true, message: '交易金额不能为空', trigger: 'blur' }],
  hasArrears: [{ required: true, message: '是否欠款不能为空', trigger: 'blur' }],
  tuitionType: [{ required: true, message: '缴费类型不能为空', trigger: 'blur' }],
})

// 打开弹窗
const openDialog = (id: string, isCopy) => {
  visible.value = true
  form.tuitionId = ''
  if (isCopy) {
    isCopystatus.value = isCopy
  }
  // 重置表单数据
  nextTick(() => {
    dataFormRef.value?.resetFields();
  });

  // 获取tuition信息
  if (id) {
    form.tuitionId = id
    getTuitionData(id)
  }
};

// 提交
const onSubmit = async () => {
  if (form.hasArrears == 1) {
    // if (!form.applicationImages) {
    //   useMessage().error('请上传学费申请书');
    //   return false;
    // }
  }
  const valid = await dataFormRef.value.validate().catch(() => { });
  if (!valid) return false;

  try {
    loading.value = true;
    // form.phone = Number(form.phone)
    if (isCopystatus.value) {
      delete form.tuitionId
      await addObj(form)
      useMessage().success('添加成功');
    } else {
      form.tuitionId ? await putObj(form) : await addObj(form);
      useMessage().success(form.tuitionId ? '修改成功' : '添加成功');
    }
    visible.value = false;
    emit('refresh');
  } catch (err: any) {
    useMessage().error(err.msg);
  } finally {
    loading.value = false;
  }
};


// 初始化表单数据
const getTuitionData = (id: string) => {
  // 获取数据
  loading.value = true
  getObj({ tuitionId: id }).then((res: any) => {
    Object.assign(form, res.data[0])
    form.operationType = formatstatus(form.operationType)
    form.paymentMethod = formatstatus(form.paymentMethod)
    form.hasArrears = formatstatus(form.hasArrears)
    form.tuitionType = formatstatus(form.tuitionType)
  }).finally(() => {
    loading.value = false
  })
};
const formatstatus = (num) => {
  if (num || num == 0) {
    let num2 = num + ''
    return num2
  } else {
    return ''
  }
}
const selectArrears = (id) => {
  console.log(id);
  if (id == 0) {
    form.arrearsAmount = 0
    console.log("qing")
  }
}
// 暴露变量
defineExpose({
  openDialog
});
</script>
